<template>
  <div class="announcements-container">
    <el-card shadow="never" class="header-card">
      <div class="page-header">
        <div class="header-content">
          <el-icon class="header-icon" :size="28"><Bell /></el-icon>
          <div class="header-text">
            <h2>公告管理</h2>
            <p>企业公告的发布与管理</p>
          </div>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="showDialog = true">
            <el-icon><Plus /></el-icon>
            发布公告
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 筛选区域 -->
    <el-card shadow="never" class="filter-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="公告标题">
          <el-input v-model="searchForm.title" placeholder="请输入公告标题" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="公告类型">
          <el-select v-model="searchForm.type" placeholder="请选择" clearable style="width: 150px">
            <el-option label="全部" value="" />
            <el-option label="通知公告" value="notice" />
            <el-option label="制度制定" value="policy" />
            <el-option label="活动宣传" value="activity" />
            <el-option label="紧急通知" value="urgent" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select v-model="searchForm.status" placeholder="请选择" clearable style="width: 150px">
            <el-option label="全部" value="" />
            <el-option label="已发布" value="published" />
            <el-option label="草稿" value="draft" />
            <el-option label="已下线" value="offline" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleReset">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据统计 -->
    <div class="stats-row">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#409EFF"><Document /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.total }}</div>
            <div class="stat-label">全部公告</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#67C23A"><SuccessFilled /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.published }}</div>
            <div class="stat-label">已发布</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#E6A23C"><Edit /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.draft }}</div>
            <div class="stat-label">草稿</div>
          </div>
        </div>
      </el-card>
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <el-icon class="stat-icon" :size="40" color="#F56C6C"><View /></el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stats.views }}</div>
            <div class="stat-label">总浏览量</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 公告列表 -->
    <el-card shadow="never">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="公告标题" min-width="200" show-overflow-tooltip>
          <template #default="{ row }">
            <el-text class="announcement-title" @click="handleView(row)" style="cursor: pointer;">
              <el-icon v-if="row.isTop"><Top /></el-icon>
              {{ row.title }}
            </el-text>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="公告类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getTypeTag(row.type)">{{ getTypeName(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="publisher" label="发布人" width="120" />
        <el-table-column prop="publishTime" label="发布时间" width="160" />
        <el-table-column prop="views" label="浏览量" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusName(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">
              <el-icon><View /></el-icon>
              查看
            </el-button>
            <el-button link type="primary" @click="handleEdit(row)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button link type="warning" @click="handleTop(row)">
              <el-icon><Top /></el-icon>
              {{ row.isTop ? '取消置顶' : '置顶' }}
            </el-button>
            <el-button link type="danger" @click="handleDelete(row)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSearch"
        @current-change="handleSearch"
        style="margin-top: 20px; justify-content: flex-end;"
      />
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="showDialog"
      :title="dialogTitle"
      width="800px"
      destroy-on-close
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入公告标题" />
        </el-form-item>
        <el-form-item label="公告类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择公告类型" style="width: 100%">
            <el-option label="通知公告" value="notice" />
            <el-option label="制度制定" value="policy" />
            <el-option label="活动宣传" value="activity" />
            <el-option label="紧急通知" value="urgent" />
          </el-select>
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <el-input v-model="form.content" type="textarea" :rows="8" placeholder="请输入公告内容" />
        </el-form-item>
        <el-form-item label="接收范围" prop="scope">
          <el-select v-model="form.scope" placeholder="请选择接收范围" style="width: 100%">
            <el-option label="全体人员" value="all" />
            <el-option label="指定部门" value="dept" />
            <el-option label="指定人员" value="person" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否置顶" prop="isTop">
          <el-switch v-model="form.isTop" />
        </el-form-item>
        <el-form-item label="发布时间" prop="publishTime">
          <el-date-picker
            v-model="form.publishTime"
            type="datetime"
            placeholder="选择发布时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="info" @click="handleSaveDraft">保存草稿</el-button>
        <el-button type="primary" @click="handleSave">立即发布</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Bell, Plus, Search, Refresh, Document, SuccessFilled, Edit, View, Delete, Top
} from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  title: '',
  type: '',
  status: ''
})

// 统计数据
const stats = reactive({
  total: 156,
  published: 128,
  draft: 18,
  views: 23456
})

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 156
})

// 表格数据
const tableData = ref([
  {
    id: 1,
    title: '关于2024年春节放假通知',
    type: 'notice',
    publisher: '张三',
    publishTime: '2024-01-15 10:30:00',
    views: 1256,
    status: 'published',
    isTop: true
  },
  {
    id: 2,
    title: '新版考勤制度正式施行通知',
    type: 'policy',
    publisher: '李四',
    publishTime: '2024-01-14 09:00:00',
    views: 856,
    status: 'published',
    isTop: false
  },
  {
    id: 3,
    title: '公司年会活动安排',
    type: 'activity',
    publisher: '王五',
    publishTime: '2024-01-13 14:30:00',
    views: 2345,
    status: 'published',
    isTop: true
  },
  {
    id: 4,
    title: '紧急：系统升级维护通知',
    type: 'urgent',
    publisher: '赵六',
    publishTime: '2024-01-12 16:00:00',
    views: 3421,
    status: 'published',
    isTop: false
  },
  {
    id: 5,
    title: '员工福利政策调整说明',
    type: 'policy',
    publisher: '张三',
    publishTime: '2024-01-11 10:00:00',
    views: 567,
    status: 'draft',
    isTop: false
  }
])

// 对话框
const showDialog = ref(false)
const formRef = ref(null)
const currentRow = ref(null)
const dialogTitle = computed(() => currentRow.value ? '编辑公告' : '发布公告')

// 表单
const form = reactive({
  title: '',
  type: '',
  content: '',
  scope: 'all',
  isTop: false,
  publishTime: null
})

// 表单验证规则
const rules = {
  title: [{ required: true, message: '请输入公告标题', trigger: 'blur' }],
  type: [{ required: true, message: '请选择公告类型', trigger: 'change' }],
  content: [{ required: true, message: '请输入公告内容', trigger: 'blur' }]
}

// 方法
const handleSearch = () => {
  console.log('搜索', searchForm)
  ElMessage.success('查询成功')
}

const handleReset = () => {
  Object.assign(searchForm, {
    title: '',
    type: '',
    status: ''
  })
  handleSearch()
}

const handleView = (row) => {
  ElMessageBox.alert(row.content || '公告内容详情...', row.title, {
    confirmButtonText: '确定',
    type: 'info'
  })
}

const handleEdit = (row) => {
  currentRow.value = row
  Object.assign(form, {
    title: row.title,
    type: row.type,
    content: '公告内容...',
    scope: 'all',
    isTop: row.isTop,
    publishTime: row.publishTime
  })
  showDialog.value = true
}

const handleTop = (row) => {
  row.isTop = !row.isTop
  ElMessage.success(row.isTop ? '置顶成功' : '取消置顶成功')
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该公告吗？', '提示', {
    type: 'warning'
  }).then(() => {
    const index = tableData.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      tableData.value.splice(index, 1)
    }
    ElMessage.success('删除成功')
  }).catch(() => {})
}

const handleSave = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('发布成功')
      showDialog.value = false
      handleReset()
    }
  })
}

const handleSaveDraft = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('保存草稿成功')
      showDialog.value = false
    }
  })
}

const getTypeName = (type) => {
  const map = {
    notice: '通知公告',
    policy: '制度制定',
    activity: '活动宣传',
    urgent: '紧急通知'
  }
  return map[type] || type
}

const getTypeTag = (type) => {
  const map = {
    notice: '',
    policy: 'warning',
    activity: 'success',
    urgent: 'danger'
  }
  return map[type] || ''
}

const getStatusName = (status) => {
  const map = {
    published: '已发布',
    draft: '草稿',
    offline: '已下线'
  }
  return map[status] || status
}

const getStatusType = (status) => {
  const map = {
    published: 'success',
    draft: 'info',
    offline: 'danger'
  }
  return map[status] || ''
}
</script>

<style scoped>
.announcements-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  color: #409EFF;
}

.header-text h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.header-text p {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #909399;
}

.filter-card {
  margin-bottom: 20px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-4px);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.announcement-title {
  color: #409EFF;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.announcement-title:hover {
  text-decoration: underline;
}
</style>

